/**
 * Created by apple on 16/7/4.
 */
angular.module("starter.taskDirective", ['ionic'])
  .directive('devinTaskItem', ['$timeout',function($timeout) {
    return {
      restrict: 'AE',
      template: '<div><div class="item-bg item" ng-class="{true: \'{{ionitemclass}}\', false: \'{{ionitemclass}}\'}[showrightword]" class="item-bg" ng-hide="" ng-click="onFouceInput($event)">'+
      '<img ng-src="{{icon}}" ng-if="icon"/>'+
      '<span style="color:{{titlecolor}}" class="project-spms-label {{titleclass}}">{{label}}</span><span ng-show="require" style="color: #ff3b30">*</span>'+
      '<i class="icon ion-chevron-right icon-accessory project-spms-accessory" ng-hide="hidearrow" ng-show="!showrightword"></i>'+
        '<span style="width:{{rightwordwidth}}px;" class="project-spms-accessory-word project-spms-accessory" ng-show="showrightword">{{rightword}}</span>'+
      '<input stringtonumber ng-readonly="{{isdisable ? true : false}}" ng-hide="{{hiderightword}}" ng-focus="focusInComp($event)" style="background-color: white;min-width:{{widthpre}}%;max-width:{{widthpre}}%" focus-me="true" type="{{inputtype}}" placeholder="{{(placeholdertext == \'electricity\') ? \'请与电费单地址一致\' : (!isdisable ? \'请填写\' : \'\')}}" class="item-input project-spms-info-input" ng-show="!choice" ng-model="content"/>'+
      '<span style="min-width:{{widthpre}}%;max-width:{{widthpre}}%" class="{{showPlaceholder ? \'project-spms-placeholder\' : \'project-spms-info\' }}" ng-show="choice">{{((!isdisable && showPlaceholder) || placeholdertext == "HAS_IMAGE") ? (placeholdertext == "HAS_IMAGE" ? "查看图片" : "请选择") : choicecontent}}</span>'+      '</div></div>',
      replace:true,
      scope: {
        icon: '@icon',
        label: '@label',
        canchoice: '@canchoice',
        content: '=content',
        choicecontent:'@choicecontent',
        widthpre: '@widthpre',
        rightword: '@rightword',
        ionitemclass: '@ionitemclass',
        titleclass: '@titleclass',
        hidearrow: '@hidearrow',
        hiderightword: '@hiderightword',
        rightwordwidth: '@rightwordwidth',
        inputtype:'@inputtype',
        titlecolor: '@titlecolor',
        placeholdertext: '@placetext',
        isdisable: '@isdisable',
        require:'@require'
      },
      link: function (scope, element, attributes) {

        // scope.isdisable = false ;

        scope.$watch(scope.placeholdertext,function(value){
          if(value == 'HAS_IMAGE'){
            scope.placeholdertextDesc = '查看照片' ;
          }else {
            scope.placeholdertextDesc = '请选择' ;
          }
        });

        scope.focusInComp = function($event){
          var input = $event.target;
          var con = scope.content ;
          //console.log(con);
          //console.log(input);
          //$timeout(function(){
          //  input.setSelectionRange(con.length,con.length);
          //},300);
          //input.value = "";
          //input.value = con;
          setTimeout(function(){
            if(input.type == 'text' || input.type == ''){
              input.setSelectionRange(con.length,con.length);
            }
          },100);
        }

        scope.$watch(attributes.canchoice,function(value){
          scope.choice = attributes.canchoice == 'false' ? false : true ;
        });


        scope.$watch('choicecontent',function(value){
          //console.log(value == '');

          if(value == '' || typeof(value) == 'undefined' || value == '请选择') {
            scope.showPlaceholder = true ;
          }else {
            scope.showPlaceholder = false ;
          }
        });

        if(typeof(attributes.inputtype) == 'undefined') {
          scope.inputtype = 'text'
        }else {
          scope.inputtype = attributes.inputtype ;
        }


        if(typeof(attributes.widthpre) == 'undefined') {
          scope.widthpre = 45 ;
        }else {
          if(!isNaN(attributes.widthpre)){
            scope.widthpre = 45 ;
          }else {
            scope.widthpre = attributes.widthpre ;
          }
        }

        if(typeof(attributes.rightword) == 'undefined') {
          scope.showrightword = false ;
        }else {
          scope.$watch('rightword',function(value){
            scope.showrightword = true ;
          })
        }

        scope.$watch('rightwordwidth',function(value){
          if(!scope.rightwordwidth){
            scope.rightwordwidth = 20;
          }
        })


        //scope.onFouceInput = function($event){
        //  //scope.focusInput = true ;
        //  var target = $event.target ;
        //  if(target.nodeName.toLowerCase() == 'div') {
        //
        //  }else {
        //    target = target.parentNode;
        //  }
        //  var input = target.getElementsByTagName("input");
        //  if(input.length > 0) {
        //    setTimeout(function(){
        //      input[0].focus();
        //    },100);
        //  }
        //}
      }
    };
  }])
  .directive('moreTaskItem', ['$timeout',function($timeout) {
    return {
      restrict: 'AE',
      template: '<div ng-click="changeMode()"> <div class="item-bg item"> <img ng-src="{{icon}}">' +
      '<label>{{label}}</label> <label style="color:#AAAAAA; float: right; margin: 2px 10px 0 0;">{{content}}</label>'+
      '<textarea style="margin:10px 0 0 0;width:100%;resize: none;height: 36px; position: relative;">{{content}}</textarea>'+
      '</div></div>',
      replace:true,
      scope: {
        icon: '@icon',
        label: '@label',
        content: '@content'
      },
      link: function (scope, element, attributes) {

        scope.changeMode = function() {

        };

      }
    };
  }])

